<template>
	<div :data-theme="userStore.theme">
		<el-config-provider :locale="currentLocale">
  <button @click='gohome' :class="`btn-${userStore.theme}`">Home</button>
  <button @click='goabout' :class="`btn-${userStore.theme}`">Login</button>

  <!-- <button class="btn-high"></button>
  <button class="btn-dark"></button> -->

  <div @click="changeTheme" class="btn-dark w-32 text-center cursor-pointer hover:opacity-50 transition-all duration-300">切换风格</div>
  <div>{{ userStore.theme }} {{ userStore.UserInfo.name }}</div>

	<p class="text-primary text-lg">分享技术、生活和思考</p>


  <div @click="toggleLanguage"  class="btn-dark w-32 text-center cursor-pointer hover:opacity-50 transition-all duration-300">切换语言</div>
  <p>{{ $t('user.welcome',{name:'小米'}) }} {{userStore.lang }}</p>



  <!-- <DatePicker></DatePicker> -->
  <el-pagination
  size="small"
    background
    layout="total, prev, pager, next"
    :total="50"
    class="mt-4"
    />


  <div  :clsss="`theme-${userStore.theme}`">
    <router-view></router-view>
  </div>
  
</el-config-provider>
	</div>

</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRouter} from 'vue-router';
import { useUserStore } from '@/pinia/module/user';

import { ElConfigProvider, ElMessage } from 'element-plus'

import { initTheme, changeTheme } from '@/hooks/changeTheme';
import { getLocale , changeLanguage } from '@/hooks/changeLanguage';

import { useI18n } from 'vue-i18n';
const { locale } = useI18n();

const userStore = useUserStore();

// 获取语言
let currentLocale = computed(()=>{
  initTheme(userStore.theme)
	return getLocale(); 
}) 

// 切换语言
const toggleLanguage = () => {
  const newLang = changeLanguage();
	userStore.saveLang(locale.value);
  ElMessage.success(`切换语言为：${newLang}`);
}

// 切换菜单
const router = useRouter()
const gohome = () => {
	router.push('/')
}

const goabout = () => {
	router.push('/Login')
}


</script>

<style scoped lang="scss">
@import url("./styles/theme-tailwind.css");
</style>
